<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="utf-8">
    <title>角色授权</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{lib/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{css/public.css}" media="all">
</head>
<body>
<!---->
<div id="test7" class="demo-tree"></div>
<input type="hidden" id="roleId" th:value="${roleId}"/>
<div class="layui-btn-container" style="text-align: center;margin-top: 20px;">
    <button type="button" class="layui-btn layui-btn-sm max_width_btn" lay-demo="getChecked"><i class="layui-icon">&#xe605;</i>保存
    </button>
    <button type="button" class="layui-btn layui-btn-danger layui-btn-sm max_width_btn" lay-demo="reload"><i
            class="layui-icon">&#xe9aa;</i>重置
    </button>
</div>
</body>
<script th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>

<script type="text/javascript">

    layui.use(['tree', 'util'], function () {
        var tree = layui.tree
            , layer = layui.layer
            , util = layui.util;
        //开启复选框
        tree.render({
            elem: '#test7'
            , id: "menu_tree"
            , data: getData()
            , showCheckbox: true
        });

        //监听按钮事件
        util.event("lay-demo", {
                getChecked: function (othis) {
                    var roleId = $("#roleId").val();
                    var treeValue = tree.getChecked("menu_tree");
                    var checkedIds = [];//存储选中的ID

                    if (treeValue.length > 0) {
                        //遍历 所以选中的一级菜单
                        for (var i = 0; i < treeValue.length; i++) {
                            //把选中的一级菜单的ID存放到checkedIds数组中
                            checkedIds.push(treeValue[i].id);
                            if (treeValue[i].children.length > 0) {
                                for (var j = 0; j < treeValue[i].children.length; j++) {
                                    checkedIds.push(treeValue[i].children[j].id)
                                }
                            }
                        }
                    }
                    //发起异步请求，给角色重新授权
                    $.ajax({
                        url: "/update_roleMenu",
                        type: "post",
                        data: {checkedIds: JSON.stringify(checkedIds), roleId: roleId},
                        dataType: "json",
                        success: function (res) {
                            if (res.code == "0000") {
                                //更新成功,需要把弹出层关闭
                                var iframeIndex = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(iframeIndex);//关闭弹出层
                            } else {
                                layer.msg(res.msg, function () {
                                    var iframeIndex = parent.layer.getFrameIndex(window.name);
                                    parent.layer.close(iframeIndex);//关闭弹出层
                                })
                            }
                        }
                    })
                },
                reload: function (othis) {
                    //重置按钮操作，重新渲染tree组件，恢复到最初的样子
                    tree.reload("menu_tree", {})
                }
            }
        )

    })

    function getData() {
        var data = [];
        var roleId = $("#roleId").val();
        $.ajax({
            url: "/getMenuTree",
            data: {roleId: roleId},
            type: "post",
            async: false,//同步
            success: function (res) {
                data = res.data;
            }

        })
        return data;
    }

</script>
</html>